<template>
  <div>
    <div>
      This is mine.
    </div>
    <footer class="show-footer bg-dark text-center">
      <div class="d-flex footer-menu-control">
        <router-link to="/home" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-drivers-license-o pr-1"></i>Home</router-link>
        <router-link to="/more" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-plus-circle pr-1"></i>More</router-link>
        <router-link to="/order/all" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-sticky-note-o pr-1"></i>Order</router-link>
        <router-link to="/userInfo" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-user-o pr-1"></i>Me</router-link>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'UserInfo'
}
</script>

<style scoped>
  .show-footer{
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-top: 2rem;
  }
</style>
